@extends('layouts.default')
@section('css')
    <link rel="stylesheet" href="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.css')}}">
    {{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
    <link rel="stylesheet" href="{{asset('admin-lte/plugins/datetimepicker/css/bootstrap-datetimepicker.css')}}">

@stop

@section('content')
    <div class="row">
        <div class="col-12">
            
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">红包管理/ <a class="text-primary" href="{{url('admin/RedBag/index')}}">红包列表</a></h3>
                </div>

                <div class="row">
                    <div style="width: 98.5%">
                        <div class="pull-right">
                            <div class="col-12">
                                <form action="#" class="form-inline" onsubmit="return false;">
                                    <div class="form-group">
                                        <label for="search_key">搜索类型：</label>
                                        <select class="form-control" id="search_key">
                                            <option value="from_user_name">代充值账号</option>
                                            <option value="to_user_name">充值账号</option>
                                            <option value="vip_card_sn">会员卡卡号</option>
                                            <option value="total_amount">充值金额</option>
                                            <option value="created_at">下单时间</option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-left: 15px" id="search_box">
                                        <label for="search" class="sr-only">搜索关键字：</label>
                                        @if(!empty($search))
                                            <input type="text" class="form-control" id="search" style="text-align: left" placeholder="请输入搜索关键字" value="{{isset($search['val'])?$search['val']:''}}">
                                        @else
                                            <input type="text" class="form-control" id="search" style="text-align: left" placeholder="请输入搜索关键字" value="">
                                        @endif
                                        <input type="text" class="form-control" id="begin_time" style="text-align: left;display: none" placeholder="开始时间" value="{{getSearchTime($search)['begin_time']}}" >
                                        <span id="s_line" style="display: none;margin-left: 3px;margin-right: 3px">——</span>
                                        <input type="text" class="form-control" id="end_time" style="text-align: left;display: none" placeholder="结束时间" value="{{getSearchTime($search)['end_time']}}">
                                        <button class="btn-info" style="margin-left: 3px;display: none" id="searchBtn">搜索</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                @include('layouts.message')
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>代充值用户昵称</th>
                            <th>代充值用户名</th>
                            <th>充值用户昵称</th>
                            <th>充值用户名</th>
                            <th>代充值会员卡号</th>
                            <th>代充值订单号</th>
                            <th>充值金额</th>
                            <th>佣金比率</th>
                            <th>佣金金额</th>
                            <th>充值状态</th>
                            <th>佣金去向</th>
                            <th>代充值记录创建时间</th>
                            <th>代充值订单最后更新</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($lists as $list)
                        <tr>
                            <td>{{ $list['id'] }}</td>
                            <td>{{ $list['from_nick_name'] }}</td>
                            <td>{{ $list['from_user_name'] }}</td>
                            <td>{{ $list['to_nick_name'] }}</td>
                            <td>{{ $list['to_user_name'] }}</td>
                            <td>{{$list['vip_card_sn']}}</td>
                            <td>{{$list['order_sn']}}</td>
                            <td>{{$list['total_amount']}}</td>
                            <td>{{$list['commission_rate']}}</td>
                            <td>{{$list['commission']}}</td>
                             @if($list['pay_status'] == 2)
                                <td style="color: green">{{rechargeStatus($list['pay_status'])}}</td>
                            @else
                                <td>{{rechargeStatus($list['pay_status'])}}</td>
                            @endif
                            <td>{{rechargeCommissionDirection($list['direction'])}}</td>
                            <td>{{$list['created_at']}}</td>
                            <td>{{$list['updated_at']}}</td>
                            <td>佣金</td>
                        </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <input type="hidden" value="{{$search['key']??''}}" id="key">

    <div  id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {{--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>--}}
                    <h4 class="modal-title" id="gridSystemModalLabel">修改分佣比例</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="rate" id="rateLabel">分佣比例：</label>
                            <input type="text" class="form-control" id="rate" name="" placeholder="请输入2位小数" style="margin-left: 10px" value="">
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="modify">修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
@stop

@section('script')
    <script src="{{asset('admin-lte/plugins/datatables/jquery.dataTables.js')}}"></script>
    <script src="{{asset('admin-lte/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
    {{--引入bootstrap datetimepicker插件--}}
    <script src="{{asset('admin-lte/plugins/datetimepicker/js/bootstrap-datetimepicker.js')}}"></script>
    <script src="{{asset('admin-lte/plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js')}}"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "language"  : {
                    url :'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Chinese.json',
                },
                "lengthChange": false,
                "searching": false,
            });

            // 搜索
            $('#search').keypress(function(e){
                e = e || window.event;
               if (e.keyCode==13){
                  let search_key            = $('#search_key').val();
                  let search_val            = $('#search').val();
                  let url                   = location.href;
                  url = url.split('?')[0];
                  if (!search_key           == '' && search_val!== ''){
                      let newUrl            = `${url}?key=${search_key}&val=${search_val}`;
                      location.href          =   newUrl;console.log(newUrl)
                  }else {
                      location.href          =   url;
                  }
               }
            });


            let key = $('#key').val();
            if(key){
                $('#search_key').val(key);
            }else {
                $('#search_key').val('from_user_name');
            }

            $('#search_key').change(function () {
                let search_key = $(this).val();
                if (search_key == 'created_at'){
                    $('#search').css('display','none');
                    $('#begin_time').css('display','block');
                    $('#end_time').css('display','block');
                    $('#s_line').css('display','block');
                    $('#searchBtn').css('display','block');

                    $("#begin_time").datetimepicker({//选择年月日
                        format: 'yyyy-mm-dd hh:ii:ss',
                        language: 'zh-CN',
                        weekStart: 1,
                        todayBtn: 1,//显示‘今日’按钮
                        autoclose: 1,
                        todayHighlight: 1,
                        startView: 2,
                        minView: 0,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
                        clearBtn:true,//清除按钮
                        forceParse: 0
                    });

                    $("#end_time").datetimepicker({//选择年月日
                        format: 'yyyy-mm-dd hh:ii:ss',
                        language: 'zh-CN',
                        weekStart: 1,
                        todayBtn: 1,//显示‘今日’按钮
                        autoclose: 1,
                        todayHighlight: 1,
                        startView: 2,
                        minView: 0,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
                        clearBtn:true,//清除按钮
                        forceParse: 0
                    });

                    $("#searchBtn").on('click',function () {
                        let  search_val                 = new Object();
                        search_val ['begin_time']       = $('#begin_time').val();
                        search_val ['end_time']         = $('#end_time').val();
                        let url                         = location.href;
                        url = url.split('?')[0];
                        if ( search_val!== ''){
                            let newUrl                  = `${url}?key=created_at&val=${JSON.stringify(search_val)}`;
                            location.href               =   newUrl;
                        }else {
                            location.href               =   url;
                        }
                    })

                }else {
                    $('#search').css('display','block');
                    $('#begin_time').css('display','none');
                    $('#end_time').css('display','none');
                    $('#s_line').css('display','none');
                    $('#searchBtn').css('display','none');
                }

            });

            $('#search_key').trigger("change");


            $('#commission_rate').on('click',function () {
                $('#myModal').modal();
            });


            $('#modify').on('click',function (e) {
                let baseUrl     =location.origin;
                let RequsetUrl  = baseUrl +'/admin/RechargeCommission/edit';
                let rate        = parseFloat($('#rate').val());
                if (rate>=0&&!isNaN(rate)){
                    let href                = `${RequsetUrl}/${rate}`;console.log(RequsetUrl);
                    location.href           =   href;
                }else {
                    $('#msg').html(`
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                               分佣比例错误
                         </div>`
                    );
                }
            })


        });










    </script>
@stop